import React from 'react'
import Http from '../../../Utils/Http';
import { loginApi } from 'Api/api';

import { Form, Input, Select, message } from 'antd';
import { useHistory } from 'react-router-dom';
import { setStorage } from 'utils/Storage'
import { USER_TOKEN } from 'Common/common';
import SVG from 'components/SVG';
import './login.scss'
const loginBtnBg = require('assets/account/btn-bg@2x.png')
const { Option } = Select;
interface LoginProps {
    phoneNum: string,
    historyStep: string,
    setStep: (val: string) => any,
    setPhone: (val: string) => any,
    setHistoryStep: (val: string) => any,
}
interface Ilogin {
    userName: string,
    password: string,
}
interface IlofinData {
    error: string,
    data: Ilogin
}

function Login(props: LoginProps) {
    const { phoneNum, historyStep, setStep, setPhone, setHistoryStep } = props;
    let history = useHistory();
    const login = (loginInfo: any) => {
        const isLogin: IlofinData = onFinishFailed(loginInfo);
        if (isLogin.error) {
            message.error(isLogin.error);
            return false
        }
        Http.post(`${loginApi}`, isLogin.data).then((res: any) => {
            if (res.data) {
                if (res.code === 1) {
                    setStorage({ name: USER_TOKEN, value: JSON.stringify(res.data) })
                    setHistoryStep('4');
                    message.success('登陆成功');
                    history.push('/Item');
                } else {
                    message.error(res.msg)
                }
            }
        })
    }


    const onFinishFailed: (createInfo: Ilogin) => IlofinData = (createInfo) => {
        let error: string = '', data: Ilogin = {
            userName: '',
            password: '',
        }
        if (!createInfo.userName) {
            error = error || "请输入账号";
        } else {
            data.userName = createInfo.userName;
        }
        if (!createInfo.password) {
            error = error || "请输入密码";
        } else {
            data.password = createInfo.password;
        }
        return {
            error,
            data
        }
    }
    const prefixSelector = (
        <Select defaultValue='86' style={{
            width: 70
        }}>
            <Option value="86">+86</Option>
            <Option value="87">+87</Option>
        </Select>
    );
    return (
        <div className='login-box animate-route'>
            <p className='login-box-title'>解锁新技能,上天赋树</p>
            <div className='login-form'>
                <div onClick={() => {
                    setStep(historyStep)
                }}>
                    <SVG xlinkHref='icon-fanhui' className='reset-return' />
                </div>
                <p className='login-form-title'>
                    登录账户
                            </p>
                <Form name='login' onFinish={login}>
                    <Form.Item
                        name="userName"
                        initialValue={phoneNum}>
                        <Input className='login-form-account' addonBefore={prefixSelector} style={{ width: '100%' }} />
                    </Form.Item>
                    <Form.Item
                        name="password" className='login-form-input' >
                        <Input.Password placeholder='请输入密码' />
                    </Form.Item>
                    <Form.Item>
                        <button className='login-btn' type='submit'>
                            <img src={loginBtnBg} alt="登录按钮背景" />
                                登录</button>
                    </Form.Item>
                    <Form.Item>
                        <div className='login-mode' onClick={() => {
                            setStep('3')
                        }}>
                            <p>忘记密码？</p>
                        </div>
                    </Form.Item>
                </Form>
            </div>
        </div >
    )
}

export default Login
